<script setup lang="ts">
import { Check } from '@element-plus/icons-vue'

interface MembershipPlan {
    id: number
    name: string
    price: number
    originalPrice: number
    duration: string
    benefits: string[]
    popular: boolean
}

interface Props {
    plan: MembershipPlan
    selected: boolean
}

const props = defineProps<Props>()
const emit = defineEmits<{
    select: [planId: number]
}>()

const selectPlan = () => {
    emit('select', props.plan.id)
}
</script>

<template>
    <div class="relative bg-white rounded-lg p-4 border-2 transition-all duration-200 cursor-pointer"
        :class="selected ? 'border-blue-500 shadow-lg' : 'border-gray-200 hover:border-gray-300'" @click="selectPlan">
        <div v-if="plan.popular" class="absolute -top-2 -right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">
            热门
        </div>

        <div class="flex justify-between items-start">
            <div class="flex-1">
                <div class="flex items-center gap-2 mb-2">
                    <h4 class="text-lg font-semibold text-gray-800">{{ plan.name }}</h4>
                    <span class="text-sm text-gray-500">{{ plan.duration }}</span>
                </div>

                <div class="flex items-center gap-2 mb-3">
                    <span class="text-2xl font-bold text-red-500">¥{{ plan.price }}</span>
                    <span class="text-sm text-gray-400 line-through">¥{{ plan.originalPrice }}</span>
                    <span class="text-xs bg-red-100 text-red-600 px-2 py-1 rounded">
                        省¥{{ plan.originalPrice - plan.price }}
                    </span>
                </div>

                <div class="space-y-1">
                    <div v-for="benefit in plan.benefits" :key="benefit"
                        class="flex items-center gap-2 text-sm text-gray-600">
                        <el-icon class="text-green-500">
                            <Check />
                        </el-icon>
                        {{ benefit }}
                    </div>
                </div>
            </div>

            <!-- 選擇指示器 -->
            <div class="w-6 h-6 rounded-full border-2 flex items-center justify-center ml-4"
                :class="selected ? 'border-blue-500 bg-blue-500' : 'border-gray-300'">
                <div v-if="selected" class="w-3 h-3 bg-white rounded-full"></div>
            </div>
        </div>
    </div>
</template>
